<template>
  <div class="bg-white h-full flex flex-col">
    <div class="flex-1 overflow-y-auto min-h-0">
      <!-- 错误信息展示区域 -->
      <div v-if="currentResult?.error" class="px-4 py-3">
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
          <div class="flex items-start">
            <div class="flex-shrink-0 mt-0.5">
              <svg
                class="h-5 w-5 text-red-400"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                  clip-rule="evenodd"
                />
              </svg>
            </div>
            <div class="ml-3">
              <div class="text-sm font-medium text-red-800">执行错误</div>
              <div
                class="mt-2 text-sm text-red-700 font-mono whitespace-pre-wrap"
              >
                {{ currentResult.error }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 骨架屏 -->
      <template v-else-if="currentResult?.loading">
        <div class="px-4 py-3">
          <div class="h-8 bg-gray-100 rounded animate-pulse mb-4 w-32"></div>
          <div class="space-y-4">
            <div v-for="i in 3" :key="i">
              <div
                class="h-6 bg-gray-100 rounded animate-pulse w-24 mb-2"
              ></div>
              <div
                class="border-2 border-dashed border-gray-200 rounded-lg p-4"
              >
                <div class="grid grid-cols-3 gap-4">
                  <div
                    v-for="j in 3"
                    :key="j"
                    class="h-6 bg-gray-100 rounded animate-pulse"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <!-- 实际内容 -->
      <template v-else>
        <!-- 状态栏 -->
        <div class="flex items-center gap-3 px-4 py-3">
          <span
            :class="[
              'inline-flex items-center px-2 py-1 text-lg font-bold rounded',
              currentResult?.status === '成功'
                ? 'text-green-600 bg-green-50'
                : 'text-red-600 bg-red-50',
            ]"
          >
            {{ currentResult?.message || "等待执行" }}
          </span>
          <span class="text-gray-500 text-sm">
            执行用时: {{ currentResult?.time || 0 }}ms
          </span>
        </div>

        <!-- 测试用例选择器 -->
        <div class="px-4 py-2 flex gap-2">
          <button
            v-for="(_, index) in results"
            :key="index"
            class="px-3 py-1.5 rounded text-sm font-medium transition-colors"
            :class="[
              currentIndex === index
                ? 'bg-gray-100 text-gray-900'
                : 'text-gray-600 hover:bg-gray-50',
            ]"
            @click="currentIndex = index"
          >
            Case {{ index + 1 }}
          </button>
        </div>

        <!-- 结果展示区域 -->
        <div class="px-4 py-2 space-y-4">
          <!-- 执行结果 -->
          <div v-if="currentResult?.result">
            <div class="text-sm font-medium text-gray-900 mb-2">
              执行结果
              <span
                v-if="currentResult.passed"
                class="text-green-500 text-xs ml-2"
              >
                (查询结果正确)
              </span>
              <span
                v-else-if="!currentResult.passed && !currentResult.error"
                class="text-red-500 text-xs ml-2"
              >
                (查询结果不正确)
              </span>
            </div>
            <div class="table-container">
              <div class="terminal-table-wrapper">
                <div class="terminal-table">
                  <div class="table-header">
                    <div
                      v-for="header in Object.keys(
                        currentResult.result[0] || {}
                      )"
                      :key="header"
                      class="table-cell"
                    >
                      {{ header }}
                    </div>
                  </div>
                  <div
                    v-for="(row, rowIndex) in currentResult.result"
                    :key="rowIndex"
                    class="table-row"
                    :class="{
                      'success-row': currentResult.passed,
                      'error-row':
                        !currentResult.passed && !currentResult.error,
                    }"
                  >
                    <div
                      v-for="header in Object.keys(
                        currentResult.result[0] || {}
                      )"
                      :key="header"
                      class="table-cell"
                    >
                      {{ row[header] }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 期望结果 -->
          <div v-if="currentResult?.expectedResult">
            <div class="text-sm font-medium text-gray-900 mb-2">期望结果</div>
            <div class="table-container">
              <div class="terminal-table-wrapper">
                <div class="terminal-table">
                  <div class="table-header">
                    <div
                      v-for="header in Object.keys(
                        currentResult.expectedResult[0] || {}
                      )"
                      :key="header"
                      class="table-cell"
                    >
                      {{ header }}
                    </div>
                  </div>
                  <div
                    v-for="(row, rowIndex) in currentResult.expectedResult"
                    :key="rowIndex"
                    class="table-row"
                  >
                    <div
                      v-for="header in Object.keys(
                        currentResult.expectedResult[0] || {}
                      )"
                      :key="header"
                      class="table-cell"
                    >
                      {{ row[header] }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  results: {
    type: Array,
    required: true,
    default: () => [
      {
        error: null,
        message: "等待执行",
        time: 0,
        status: "等待执行",
        result: [],
        expectedResult: [],
        passed: false,
        loading: false,
      },
    ],
  },
});

const currentIndex = ref(0);
const currentResult = computed(() => props.results[currentIndex.value] || {});
</script>

<style scoped>
.table-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.terminal-table-wrapper {
  display: inline-block;
  min-width: min-content;
  max-width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: 2px dashed #d1d5db;
  border-radius: 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.2;
}

.terminal-table {
  display: table;
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  color: #374151;
}

.table-header {
  display: table-row;
  font-weight: 600;
  /* 移除背景色 */
  background-color: transparent;
}

.table-row {
  display: table-row;
}

.table-header > div,
.table-row > div {
  display: table-cell;
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
  border-right: 2px dashed #d1d5db;
}

.table-header > div {
  border-bottom: 2px dashed #d1d5db;
}

.table-header > div:last-child,
.table-row > div:last-child {
  border-right: none;
}

/* 错误状态下的样式 */
.error-row {
  color: #dc2626;
  background-color: #fef2f2;
}

/* 修改成功状态的样式 */
.success-row {
  color: #059669;
  background-color: #ecfdf5;
}

/* 滚动条样式 */
.table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* 整体容器滚动条样式 */
.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

/* 添加骨架屏动画 */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
